<template>
	<div class="search">
		<div class="search-top center">
			<router-link to="/">
				<i class="el-icon-arrow-left"></i>
			</router-link>
			<p>搜索中心</p>
		</div>
		<div class="search-center">
			<div class="center">
				<div class="search-top">
					<input v-model="txt" type="text" placeholder="请输入要搜索的商品"/>
					<button v-if="state"  type="submit" @click="getsearch()" :disabled="isfn">搜索</button>
					<button v-else type="submit" @click="getclean()">清除</button>
				</div>
				<ul class="main">
					<li v-for="(item,index) in list" :key="index">
						<router-link :to="'/GoodDetail/'+index">
						<span>{{item.goods_name}}</span>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				txt:'',
				list:[],
				state:true,
				btnstate:false
			}
		},
		methods:{
			getsearch:function(){
				this.axios.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/search',{query:this.txt}).then(
					res=>{
						this.list=res.data.message.goods
						this.state=false
					}
				)
			},
			getclean:function(){
				this.list=''
				this.txt=''
				this.state=true
			},
		},
		computed:{
			isfn:function(){
				if(this.txt){
					return this.btnstate=false
				}
				else{
					return this.btnstate=true
				}
			}
		}
	}
</script>

<style scoped>
	* { 
		padding: 0; 
		margin: 0; 
		box-sizing: border-box;
	}
	i{
		font-size: 20px;
		float: left;
		font-weight: 600;
	}
	input{
		height: 25px;
		font-size: 14px;
		
	}
	button{
		height: 25px;
		font-size: 14px;
		padding: 0 10px;
		border: none;
	}
	.search{
		background-color: #FF0000;
	}
	.center{
		width: 94%;
		margin: 0 auto;
	}
	.search-top{
		background-color: ccc;
		padding: 10px 0;
	}
	.search-top>p{
		text-align: center;
		font-weight: 600;
	}
	.search-center{
		background-color: #CCCCCC;
		padding-bottom: 1200px;
	}
	input{
		width: 80%;
		padding-left: 5px;
	}
	.main{
		padding-top: 5px;
	}
	.main>li{
		list-style: none;
		background-color: white;
		padding-left: 5px;
		line-height: 30px;
		border-bottom: 2px solid #ccc;
		font-size: 16px;
	}
	.main>li span{
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
